<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线上Bug定位与处理完全指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .step-number {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .tool-badge {
            transition: all 0.2s ease;
        }
        .tool-badge:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            bottom: -10px;
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            border-radius: 2px;
        }
        .mermaid {
            background: white;
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        .floating-icon {
            animation: float 3s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <div class="hero-gradient text-white py-20 px-6">
        <div class="max-w-6xl mx-auto">
            <div class="text-center">
                <div class="floating-icon inline-block mb-6">
                    <i class="fas fa-bug text-6xl opacity-90"></i>
                </div>
                <h1 class="text-5xl md:text-6xl font-bold mb-6" style="font-family: 'Noto Serif SC', serif;">
                    线上Bug定位与处理
                </h1>
                <p class="text-xl md:text-2xl opacity-90 max-w-3xl mx-auto leading-relaxed">
                    从混沌到清晰，从问题到解决方案的系统化旅程
                </p>
                <div class="mt-10 flex justify-center space-x-8">
                    <div class="text-center">
                        <i class="fas fa-clock text-3xl mb-2"></i>
                        <p class="text-sm">快速响应</p>
                    </div>
                    <div class="text-center">
                        <i class="fas fa-search text-3xl mb-2"></i>
                        <p class="text-sm">精准定位</p>
                    </div>
                    <div class="text-center">
                        <i class="fas fa-shield-alt text-3xl mb-2"></i>
                        <p class="text-sm">持续改进</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-7xl mx-auto px-6 py-16">
        <!-- Introduction Card -->
        <div class="bg-white rounded-2xl shadow-xl p-8 mb-12 card-hover">
            <div class="flex items-start">
                <div class="bg-purple-100 rounded-full p-4 mr-6">
                    <i class="fas fa-lightbulb text-purple-600 text-2xl"></i>
                </div>
                <div class="flex-1">
                    <h2 class="text-2xl font-bold text-gray-800 mb-4">核心理念</h2>
                    <p class="text-gray-600 leading-relaxed text-lg">
                        上线项目后的Bug定位和处理是一个系统工程，涵盖信息收集、问题重现、日志分析、代码审查、修复实施、部署验证以及团队协作等多个环节。通过标准化流程和专业工具的配合，我们能够高效地定位和解决问题，确保系统稳定性和用户满意度。
                    </p>
                </div>
            </div>
        </div>

        <!-- Process Visualization -->
        <div class="mb-16">
            <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center relative inline-block section-title">
                Bug处理流程图
            </h2>
            <div class="mermaid">
                graph TD
                    A[发现Bug] --> B[信息收集]
                    B --> C[Bug重现]
                    C --> D[日志分析]
                    D --> E[代码审查]
                    E --> F[定位根因]
                    F --> G[实施修复]
                    G --> H[测试验证]
                    H --> I[部署上线]
                    I --> J[监控验证]
                    J --> K[文档更新]
                    K --> L[经验总结]
                    
                    style A fill:#ff6b6b,stroke:#fff,stroke-width:2px,color:#fff
                    style F fill:#667eea,stroke:#fff,stroke-width:2px,color:#fff
                    style I fill:#4ecdc4,stroke:#fff,stroke-width:2px,color:#fff
                    style L fill:#95e1d3,stroke:#fff,stroke-width:2px,color:#fff
            </div>
        </div>

        <!-- Main Sections -->
        <div class="space-y-16">
            <!-- Section 1: 确认Bug的存在 -->
            <section>
                <div class="flex items-center mb-8">
                    <div class="text-6xl font-bold step-number mr-6">1</div>
                    <h2 class="text-3xl font-bold text-gray-800">确认Bug的存在</h2>
                </div>
                
                <div class="grid md:grid-cols-2 gap-8">
                    <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-info-circle text-purple-600 text-2xl mr-3"></i>
                            <h3 class="text-xl font-bold text-gray-800">收集信息</h3>
                        </div>
                        <p class="text-gray-600 mb-4">从用户反馈和监控系统中获取详细的错误信息、日志记录和复现步骤。</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="tool-badge bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm">
                                <i class="fas fa-tools mr-1"></i> Sentry
                            </span>
                            <span class="tool-badge bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm">
                                <i class="fas fa-tools mr-1"></i> Logstash
                            </span>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-redo text-purple-600 text-2xl mr-3"></i>
                            <h3 class="text-xl font-bold text-gray-800">重现Bug</h3>
                        </div>
                        <p class="text-gray-600 mb-4">在开发或测试环境中尝试重现问题，深入理解Bug的本质和触发条件。</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="tool-badge bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm">
                                <i class="fas fa-tools mr-1"></i> 调试工具
                            </span>
                            <span class="tool-badge bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm">
                                <i class="fas fa-tools mr-1"></i> 日志分析
                            </span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Section 2: 定位Bug -->
            <section>
                <div class="flex items-center mb-8">
                    <div class="text-6xl font-bold step-number mr-6">2</div>
                    <h2 class="text-3xl font-bold text-gray-800">定位Bug</h2>
                </div>
                
                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-6 card-hover">
                        <i class="fas fa-file-alt text-purple-600 text-3xl mb-4"></i>
                        <h4 class="font-bold text-gray-800 mb-2">分析日志</h4>
                        <p class="text-sm text-gray-600">查看应用和系统日志，寻找异常信息和错误堆栈。</p>
                        <div class="mt-4">
                            <span class="text-xs bg-white px-2 py-1 rounded">ELK Stack</span>
                        </div>
                    </div>
                    
                    <div class="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl p-6 card-hover">
                        <i class="fas fa-bug text-blue-600 text-3xl mb-4"></i>
                        <h4 class="font-bold text-gray-800 mb-2">使用调试工具</h4>
                        <p class="text-sm text-gray-600">在IDE中逐步跟踪代码执行流程。</p>
                        <div class="mt-4">
                            <span class="text-xs bg-white px-2 py-1 rounded">IntelliJ IDEA</span>
                        </div>
                    </div>
                    
                    <div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-6 card-hover">
                        <i class="fas fa-code-branch text-green-600 text-3xl mb-4"></i>
                        <h4 class="font-bold text-gray-800 mb-2">回顾代码变更</h4>
                        <p class="text-sm text-gray-600">检查最近的提交，确认是否与Bug相关。</p>
                        <div class="mt-4">
                            <span class="text-xs bg-white px-2 py-1 rounded">Git</span>
                        </div>
                    </div>
                    
                    <div class="bg-gradient-to-br from-yellow-50 to-orange-50 rounded-xl p-6 card-hover">
                        <i class="fas fa-cog text-yellow-600 text-3xl mb-4"></i>
                        <h4 class="font-bold text-gray-800 mb-2">检查配置文件</h4>
                        <p class="text-sm text-gray-600">核对配置项的正确性和一致性。</p>
                        <div class="mt-4">
                            <span class="text-xs bg-white px-2 py-1 rounded">Spring Boot Config</span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Section 3: 修复Bug -->
            <section>
                <div class="flex items-center mb-8">
                    <div class="text-6xl font-bold step-number mr-6">3</div>
                    <h2 class="text-3xl font-bold text-gray-800">修复Bug</h2>
                </div>
                
                <div class="bg-white rounded-2xl shadow-xl p-8">
                    <div class="grid md:grid-cols-3 gap-8">
                        <div class="text-center">
                            <div class="bg-purple-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
                                <i class="fas fa-microscope text-purple-600 text-2xl"></i>
                            </div>
                            <h4 class="font-bold text-gray-800 mb-2">分析问题根源</h4>
                            <p class="text-sm text-gray-600">深入分析问题的根本原因，制定修复方案。</p>
                        </div>
                        
                        <div class="text-center">
                            <div class="bg-blue-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
                                <i class="fas fa-wrench text-blue-600 text-2xl"></i>
                            </div>
                            <h4 class="font-bold text-gray-800 mb-2">实施修复</h4>
                            <p class="text-sm text-gray-600">在开发环境实施修复，进行单元和集成测试。</p>
                        </div>
                        
                        <div class="text-center">
                            <div class="bg-green-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
                                <i class="fas fa-check-circle text-green-